<script lang="ts" setup>
import { useNotice } from '@/views/admin/notice/utils/notice'
import { formatFileUrl } from '@/utils/fileUtils'
import { formatDataTime } from '@/utils/dateUtils'
// 主题token
const themeToken = getThemeTokenHook()
const activeKey = ref('1')

const {
  noticeList,
  noticeTotal,
  queryNoticeParams,
  getMessageTypeName,
  changeNoticePage,
  openDetails
} = useNotice()
</script>

<template>
  <a-card class="notice">
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane key="1" tab="通知">
        <div class="notice-list">
          <div
            v-for="item in noticeList"
            :key="item.id"
            :style="{
              borderBottom: '1px solid ' + themeToken.colorBorderSecondary
            }"
            class="notice-item"
            @click="openDetails(item)"
          >
            <div class="left">
              <img :src="formatFileUrl(item.avatar)" alt="" />
            </div>
            <div class="right">
              <div :style="{ color: themeToken.colorText }" class="username">
                {{ item.username }}
              </div>

              <div class="notice-item-header">
                <a-badge v-if="item.isRead == 0" :offset="[10, 0]" dot>
                  <div :style="{ color: themeToken.colorTextSecondary }" class="notice-item-title">
                    {{ item.title }}
                  </div>
                </a-badge>

                <div
                  v-else
                  :style="{ color: themeToken.colorTextSecondary }"
                  class="notice-item-title"
                >
                  {{ item.title }}
                </div>

                <div class="notice-item-tag">
                  <a-tag :color="getMessageTypeName(item.messageType, false)">{{
                    getMessageTypeName(item.messageType, true)
                  }}</a-tag>
                </div>
              </div>
              <div :style="{ color: themeToken.colorTextTertiary }" class="notice-item-time">
                {{ formatDataTime(item.createTime) }}
              </div>
            </div>
          </div>
        </div>
        <a-pagination
          v-model:current="queryNoticeParams.pageNum"
          :pageSize="queryNoticeParams.pageSize"
          :total="noticeTotal"
          show-less-items
          style="margin-top: 15px; display: flex; justify-content: flex-end"
          @change="changeNoticePage"
        />
      </a-tab-pane>
      <a-tab-pane key="2" tab="待办">Content of Tab Pane 2</a-tab-pane>
    </a-tabs>
  </a-card>
</template>

<style scoped>
:deep(.ant-card-body) {
  padding-top: 0 !important;
}
:where(.css-dev-only-do-not-override-eq3tly).ant-tag {
  margin-inline-end: 0;
}
.notice-list {
  .notice-item {
    cursor: pointer;
    padding-bottom: 5px;
    margin-top: 15px;
    display: flex;
    &:last-child {
      border-bottom: 0 !important;
    }
    .left {
      width: 40px;
      margin-right: 15px;
      img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }
    }
    .right {
      flex: 1;
      .username {
        margin-bottom: 10px;
      }
      .notice-item-header {
        display: flex;
        justify-content: space-between;
        .notice-item-title {
          font-size: 16px;
        }
      }
      .notice-item-time {
        display: flex;
        font-size: 12px;
        color: #999;
        margin-top: 10px;
      }
    }
  }
}
</style>
